﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Styling Exam Variant 3 - Task 1</title>
    <link href="task1.css" rel="stylesheet" />
</head>
<body>
    <div id="wrapper">
        <ul class="msg-bar">
            <li>
                <a href="#" class="msg-bar-btn">Message 1</a>
                <div class="msg-bar-content">
                    <ul>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ko staa Jore</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>:)</span>
                        </li>
                        <li class="other-item">
                            <span class="user">joro:</span>
                            <span>Staa e, ne se oplakvam</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ei tva e</span>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="msg-bar-btn">Message 2</a>
                <div class="msg-bar-content">
                    <ul>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ko staa Pesho</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>:)</span>
                        </li>
                        <li class="other-item">
                            <span class="user">pesho:</span>
                            <span>Staa e, ne se oplakvam</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ei tva e</span>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="msg-bar-btn">Message 3</a>
                <div class="msg-bar-content">
                    <ul>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ko staa Goshe</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>:)</span>
                        </li>
                        <li class="other-item">
                            <span class="user">gosho:</span>
                            <span>Staa e, ne se oplakvam</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ei tva e</span>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="msg-bar-btn">Message 4</a>
                <div class="msg-bar-content">
                    <ul>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ko staa Stamo</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>:)</span>
                        </li>
                        <li class="other-item">
                            <span class="user">stamo:</span>
                            <span>Staa e, ne se oplakvam</span>
                        </li>
                        <li class="me-item">
                            <span class="user">me:</span>
                            <span>Ei tva e</span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
